"use client";

import type { CountryDetail } from "@dci/core";
import { AreaChart } from "@/components/ui/charts";
import { EmptyState } from "@/components/ui/states";
import { fmtInt, fmtMw } from "@/lib/format";

/**
 * Facilities over time (cumulative count by opening year) and, when published, cumulative known MW.
 * Rendered as two single-axis charts (never dual-axis): MW only when at least two years carry a figure.
 */
export function GrowthChart({ data }: { data: CountryDetail["growth"] }) {
  const rows = [...data].filter((d) => Number.isFinite(d.year)).sort((a, b) => a.year - b.year);
  if (rows.length < 2) return <EmptyState compact title="Not enough dated openings" description="Growth charts appear once at least two opening years are published for facilities in this country." />;
  // fill the years between the first and last observation so the curve is continuous
  const first = rows[0]!.year;
  const last = Math.max(rows[rows.length - 1]!.year, new Date().getUTCFullYear());
  const byYear = new Map(rows.map((r) => [r.year, r]));
  const facilities: Array<{ x: number; y: number }> = [];
  const mw: Array<{ x: number; y: number | null }> = [];
  let cumMw: number | null = null;
  let hasMwYears = 0;
  for (let y = first; y <= last; y++) {
    const r = byYear.get(y);
    // API rows are already cumulative facility counts by opening year
    const prevF = facilities.length ? facilities[facilities.length - 1]!.y : 0;
    facilities.push({ x: y, y: r ? Math.max(prevF, r.facilities) : prevF });
    if (r && r.knownMw !== null) {
      cumMw = (cumMw ?? 0) + r.knownMw;
      hasMwYears++;
    }
    mw.push({ x: y, y: cumMw });
  }
  const span = facilities.length;
  const step = span > 40 ? 5 : span > 20 ? 2 : 1;
  const thin = <T extends { x: number }>(pts: T[]) => pts.filter((p, i) => i === pts.length - 1 || (p.x - first) % step === 0);
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div>
        <div className="label-caps mb-2">Facilities (cumulative, by opening year)</div>
        <AreaChart series={[{ name: "Facilities", data: thin(facilities), color: "var(--ink)" }]} height={180} format={(v) => fmtInt(v)} ariaLabel="Cumulative facilities by opening year" />
      </div>
      <div>
        <div className="label-caps mb-2">Known MW (cumulative, published figures)</div>
        {hasMwYears >= 2 ? (
          <AreaChart series={[{ name: "Known MW", data: thin(mw), color: "var(--accent)" }]} height={180} format={(v) => fmtMw(v)} ariaLabel="Cumulative known capacity by opening year" />
        ) : (
          <EmptyState compact title="MW not published by year" description="Operators in this country have not published enough dated capacity figures to chart." />
        )}
      </div>
    </div>
  );
}